<template>
  <div class="product-container">
    <div>
      <el-row>
        <el-col :span="8">
          <div class="product-img">
            <img :src="product.picture" />
          </div>
        </el-col>
        <el-col :span="12" :offset="3">
          <div class="product-info">
            <div class="product-name">
              <h3>{{product.name}}</h3>
            </div>
            <div class="product-price">
              <span class="now-price">
                ￥
                <a>{{ product.price }}</a>
              </span>
              <div class="cumulative">
                <span class="number ty1">
                  累计售出
                  <br />
                  <em id="add_sell_num_363">{{ product.number }}</em>
                </span>
                <span class="number tyu">
                  累计评价
                  <br />
                  <em id="add_sell_num_363">25</em>
                </span>
              </div>
            </div>
            <!--  -->
            <div class="product-select">
              <span class="guT">数量</span>
              <el-input-number v-model="num" @change="handleChange" :min="1" label="描述文字"></el-input-number>
            </div>
          </div>
          <div class="product-post">
            <span>邮费：包邮&nbsp;&nbsp;支持货到付款</span>
          </div>
          <!-- 下单按钮  -->
          <div class="product-button">
            <el-button type="danger" class="buy-button" @click="beforBuy" style="width: 170px">
              <img src="../assets/ht.png" width="25" height="25" />立即下单
            </el-button>
            <el-button type="success" class="buy-button" @click="addToCar()" style="width: 170px">
              <img src="../assets/ht.png" width="25" height="25" />添加到购物车
            </el-button>
          </div>

        </el-col>
      </el-row>
    </div>
    <!-- 底部  -->
    <div class="product-detail">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="商品详情" name="first">
          <img :src="product.picture" style="max-height: 1000px;" />
        </el-tab-pane>

        <el-tab-pane label="商品评论" name="second">
          <el-card shadow="always" v-for="comment in commentList" :key="comment.id">
            <div class="product-comment">
              <span class="author-name">{{comment.username}}</span>
              <span class="author-time">{{comment.createTime}}</span>
              <p class="content">{{comment.content}}</p>
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </div>

    <el-dialog title :visible.sync="dialogFormVisible">
      <el-form ref="orderFormRef" :model="orderForm" label-width="80px" size="mini">
        <el-form-item label="收货地址">
          <el-radio-group size="medium" v-model="orderForm.address_id">
            <el-radio
              :label="address.id"
              border
              v-for="address in addressList"
              :key="address.id"
            >{{ address.name }} {{ address.phone }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商品名称">{{ product.name }}</el-form-item>
        <el-form-item label="购买数量">{{ num }}</el-form-item>
        <el-form-item label="折后价格">{{ num * product.price }}</el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 1,
      activeName: "first",
      dialogFormVisible: false,
      product: {},
      addressList: [],
      orderForm: {
        address_id: 0,
        product_id: 0
      },
      commentList: []
    };
  },
  mounted() {
    this.product = this.$qs.parse(sessionStorage.getItem("product"));
    this.getCommentList();
    // console.log(this.product)
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleChange() {},

    // 下单选项
    async beforBuy() {
      this.dialogFormVisible = true;
      const { data: res } = await this.$http.get("user/getMyAddress/1");
      if (res.code == 200) {
        this.addressList = res.data.userAddress;
        // console.log(res);
      }
    },
    // 添加购物车
    async addToCar(){

      const { data: res } = await this.$http.post(
        "car/addToCar",
        {product:JSON.stringify(this.product),num:this.num}
      );
      if (res.code == 200) {
        this.addressList = res.data.userAddress;
        // console.log(res);
        this.$message.success({
          type: "success",
          message: "已加入购物车！"
        });
      }
    },

    onSubmit() {
      this.dialogFormVisible = false;
      this.orderForm.product_id = this.product.id;
      console.log(this.orderForm);

      this.buy();
    },

    async buy() {
      const { data: res } = await this.$http.post(
        "/Product/buy",
        this.orderForm
      );
      console.log(res);
      if (res.code == 200) {
        this.$notify({
          title: "成功",
          message: res.message,
          type: "success"
        });
      } else {
        this.$notify.info({
          title: "消息",
          message: res.message
        });
      }
    },

    async getCommentList() {
      const { data: res } = await this.$http.get("/Product/getCommentList?id=" + this.product.id);
      console.log(res)
      if(res.code == 200){
        this.commentList = res.data.comment;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.product-container {
  width: 50%;
  margin: auto;
}
.product-img img {
  max-width: 100%;
  max-height: 100%;
}
.product-price {
  // width: 520px;
  margin-top: 15px;
  overflow: hidden;
  background: #f8f8f8;
}
.now-price {
  display: block;
  line-height: 100px;
  color: #f73a3a;
  font-size: 24px;
  float: left;
}
.now-price a {
  font-size: 36px;
  color: #f73a3a;
}
.cumulative {
  float: right;
}
.number {
  float: left;
  margin-top: 30px;
  padding: 0px 10px;
  border-right: #e7e7e7 solid 1px;
  font-size: 14px;
  text-align: center;
  color: #bfbfbf;
}

.product-select {
  height: 70px;
}
.guT {
  color: #848484;
  font-size: 14px;
  padding-right: 18px;
  line-height: 70px;
}
.product-post {
  color: #666666;
  font-size: 14px;
  line-height: 50px;
}

.product-button {
  margin-top: 20px;
}
.buy-button {
  background: #e60013;
  font-size: 16px;
  // line-height: 50px;
  width: 200px;
  height: 50px;
}
.buy-button img {
  vertical-align: middle;
  margin-bottom: 3px;
  padding-right: 5px;
}
.product-detail {
  padding-top: 50px;
}
.product-comment {
  // padding-left: 20px;

  .author-name {
    font-size: 18px;
    font-weight: 600;
  }
  .author-time {
    font-size: 14px;
    font-weight: 500;
  }
}
.product-comment span {
  display: block;
  padding: 3px;
}
</style>
